<template>
	<div style="max-height: 150px;overflow: auto" v-show="!isNotShowBtn">
		<div v-for="item in this.selectedUserLevelList" :key="item.levelId" style="display: inline-block;">
			<el-tag style="margin-right: 10px">{{ item.levelName }}
				<el-icon color="#409EFF">
					<el-icon-close @click="removeUserLevel(item.levelId)"/>
				</el-icon>
			</el-tag>
		</div>
	</div>
	<el-button v-show="!isNotShowBtn" type="primary" icon="sc-icon-user" @click="selectUserLevel" style="margin-left: 10px">选职务</el-button>

	<el-dialog :title="`职务选择【`+(this.mode?'多选':'单选')+`】`" v-model="visible" style="width: 440px !important;" destroy-on-close @closed="closeDialog">
		<div class="right-panel-search" style="margin-top: -20px">
			<el-input placeholder="职务名称" v-model="this.search.keyword" clearable></el-input>
			<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
		</div>
		<el-container>
			<el-container width="200px">
				<el-header>
					备选
					<el-button size="mini" type="danger" @click="selectQx">全选</el-button>
				</el-header>
				<el-scrollbar style="height: 300px;">
					<template v-for="(item,index) in this.userLevelList" :key="item.levelId">
						<el-row :gutter="24" style="margin:1px 5px 1px 5px;cursor: pointer;background-color: #fafafa;" @click="selectEl(item,index)">
							<el-col class="omit" :title="item.levelName">{{ item.levelName }}</el-col>
						</el-row>
					</template>
				</el-scrollbar>
			</el-container>
			<el-aside width="200px">
				<el-container>
					<el-header>
						已选
						<el-button size="mini" type="danger" @click="selectFx">反选</el-button>
					</el-header>
					<el-scrollbar style="height: 300px;">
						<template v-for="(uitem,uindex) in this.selectedUserLevelList" :key="uitem.levelId">
							<el-row :gutter="24" style="margin:1px 5px 1px 5px;cursor: pointer;background-color:#fafafa;" @click="unSelectEl(uitem,uindex)">
								<el-col :span="18" class="omit" :title="uitem.levelName">{{ uitem.levelName }}</el-col>
								<el-col :span="6" style="font-size: 18px;font-weight: 600;line-height: 32px">
									<el-icon color="#409EFF">
										<el-icon-check/>
									</el-icon>
								</el-col>
							</el-row>
						</template>
					</el-scrollbar>
				</el-container>
			</el-aside>
		</el-container>
		<template #footer>
			<el-button @click="selectAllUserLevel" v-if="this.mode" type="success">全部职务</el-button>
			<el-button @click="closeSelect">取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="selectOk()">确 定</el-button>
		</template>
	</el-dialog>
</template>
<script>
export default {
	emits: ['success', 'closed'],
	props: {
		resType:{type:String},//1:返回职务名称，同时不过行初始化
		levelId: {type: String},
		mode: {type: Boolean},
		tempOrgId:{type:String},
		isNotShowBtn: Object
	},
	data() {
		return {
			visible: false,
			isSaveing: false,
			isSelectAll: false,
			dialog: {
				isShow: false
			},
			search: {
				keyword: null
			},
			userLevelList: [],
			selectedUserLevelList: [],
			backUserLevelList: [],
		}
	},
	watch: {
		levelId() {
			if(this.resType!='1') {
				this.initSelectDialog();
			}
		}
	},
	mounted() {
		if(this.resType!='1') {
			this.initSelectDialog();
		}
	},
	methods: {
		selectEl(item, index) {
			if (this.mode) {
				var obj = false;
				this.selectedUserLevelList.find((sitem) => {
					if (sitem.levelId === item.levelId || sitem.levelId === "@all") {
						obj = true;
					}
				});
				if (!obj) {
					this.selectedUserLevelList.push(item);
					this.userLevelList.splice(index, 1);
				} else {
					this.$alert("不可重复选择！", "提示", {type: 'error'})
				}
			} else {
				if (this.selectedUserLevelList.length > 0) {
					this.$alert("单选模式不可多选！", "提示", {type: 'error'})
				} else {
					this.userLevelList.splice(index, 1);
					this.selectedUserLevelList.push(item);
				}
			}
		},
		unSelectEl(uitem, uindex) {
			var obj = false;
			this.userLevelList.find((item) => {
				if (item.levelId === uitem.levelId) {
					obj = true;
				}
			});
			this.selectedUserLevelList.splice(uindex, 1);
			if (!obj) {
				if (uitem.levelId != "@all") {
					this.userLevelList.push(uitem);
				}
			}
		},
		selectAllUserLevel() {
			this.userLevelList = [];
			this.selectedUserLevelList = [{levelId: '@all', levelName: '全部职务'}];
			this.backUserLevelList = this.selectedUserLevelList;
			this.visible = false;
			if(this.resType=="1")
			{
				this.$emit('update:levelId',"全部职务")
			}else
			{
				this.$emit('update:levelId', '@all')
			}
		},
		selectOk() {
			this.visible = false;
			this.backUserLevelList = this.selectedUserLevelList;
			let resArr = []
			let strArr = []
			this.backUserLevelList.forEach(item => {
				resArr.push(item.levelId);
				strArr.push(item.levelName);
			})
			if(this.resType=="1")
			{
				this.$emit('update:levelId',strArr.join(","))
			}else
			{
				this.$emit('update:levelId', resArr.join(","))
			}
		},
		selectQx() {
			if (this.mode) {
				var isAll = false;
				this.selectedUserLevelList.forEach(item => {
					if (item.levelId === "@all") {
						isAll = true;
						return;
					}
				})
				if (isAll) {
					this.$alert("已是全部,不可全选！", "提示", {type: 'error'})
				} else {
					if (this.selectedUserLevelList.length == 0) {
						this.selectedUserLevelList = this.userLevelList;
					} else {
						this.userLevelList.forEach(element => {
							var flag = false;
							this.selectedUserLevelList.forEach(item => {
								if (element.levelId === item.levelId) {
									flag = true;
									return;
								}
							})
							if (!flag) {
								this.selectedUserLevelList.push(element);
							}
						});
					}
					this.userLevelList = [];
				}
			} else {
				if (this.userLevelList.length > 1 || this.selectedUserLevelList.length == 1) {
					this.$alert("单选模式不可多选！", "提示", {type: 'error'})
				} else {
					if (this.userLevelList.length > 0) {
						this.selectedUserLevelList = this.userLevelList;
						this.userLevelList = [];
					}
				}
			}
		},
		selectFx() {
			this.selectedUserLevelList.forEach(item => {
				if (!this.userLevelList.includes(item)) {
					this.userLevelList.push(item);
				}
			})
			this.selectedUserLevelList = [];
		},
		//搜索
		async upsearch() {
			var noidArr = [];
			this.selectedUserLevelList.forEach(item => {
				noidArr.push(item.levelId);
			})
			let res;
			if(this.tempOrgId==undefined||this.tempOrgId==''||this.tempOrgId=='0') {
				res = await this.$API.system.userLevel.getAllUserLevelForSearch.get({keyword: this.search.keyword,notIds: noidArr.join(",")});
			}else{
				res = await this.$API.system.tempOrg.getAllTempUserLevelForSearch.get({tempOrgId:this.tempOrgId,keyword: this.search.keyword,notIds: noidArr.join(",")});
			}
			if (res.code == 200) {
				this.userLevelList = res.data;
			}
		},
		async initSelectDialog() {
			if (this.levelId != "" && this.levelId != null && this.levelId != undefined) {
				if (this.mode) {
					let res;
					if(this.tempOrgId==undefined||this.tempOrgId==''||this.tempOrgId=='0') {
						res = await this.$API.system.userLevel.getAllUserLevelForSearch.get({notIds: this.levelId});
					}else{
						res = await this.$API.system.tempOrg.getAllTempUserLevelForSearch.get({tempOrgId:this.tempOrgId,notIds: this.levelId});
					}
					if (res.code == 200) {
						this.userLevelList = res.data;
					}
					if(this.tempOrgId==undefined||this.tempOrgId==''||this.tempOrgId=='0') {
						res = await this.$API.system.userLevel.getAllUserLevelForSearch.get({ids: this.levelId});
					}else {
						res = await this.$API.system.tempOrg.getAllTempUserLevelForSearch.get({tempOrgId:this.tempOrgId,ids: this.levelId});
					}
					if (res.code == 200) {
						this.selectedUserLevelList = res.data;
					}
				}else
				{
					let res;
					if(this.tempOrgId==undefined||this.tempOrgId==''||this.tempOrgId=='0') {
						res = await this.$API.system.userLevel.getAllUserLevelForSearch.get({ids: this.defaultValue});
					}else{
						res = await this.$API.system.tempOrg.getAllTempUserLevelForSearch.get({tempOrgId:this.tempOrgId,ids: this.defaultValue});
					}
					if (res.code == 200) {
						this.selectedUserLevelList = res.data;
					}
				}
			}else
			{
				this.selectedUserLevelList=[];
			}
		},
		removeUserLevel(levelId) {
			for (var i = 0; i < this.selectedUserLevelList.length; i++) {
				if (this.selectedUserLevelList[i].levelId == levelId) {
					this.selectedUserLevelList.splice(i, 1);
				}
			}
			let resArr = [];
			let strArr = [];
			this.selectedUserLevelList.forEach(item => {
				resArr.push(item.levelId);
				strArr.push(item.levelName);
			})
			if(this.resType=="1")
			{
				this.$emit('update:levelId',strArr.join(","))
			}else
			{
				this.$emit('update:levelId', resArr.join(","))
			}
		},
		async selectUserLevel() {
			let res;
			if(this.tempOrgId==undefined||this.tempOrgId==''||this.tempOrgId=='0') {
				res = await this.$API.system.userLevel.getAllUserLevelForSearch.get({notIds: this.levelId});
			}else{
				res = await this.$API.system.tempOrg.getAllTempUserLevelForSearch.get({tempOrgId:this.tempOrgId,notIds: this.levelId});
			}
			if (res.code == 200) {
				this.userLevelList = res.data;
			}
			this.backUserLevelList = [];
			this.selectedUserLevelList.forEach(item => {
				this.backUserLevelList.push(item);
			})
			this.dialog.isShow = true
			this.$nextTick(() => {
				this.visible = true;
				return this
			})
		},
		closeSelect() {
			this.selectedUserLevelList = this.backUserLevelList;
			this.visible = false
		},
		closeDialog() {
			this.selectedUserLevelList = this.backUserLevelList;
			this.$emit('closed')
		}
	}
}
</script>
<style>
.omit {
	font-size: 14px;
	font-weight: 600;
	width: 300px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
